<template>
  <div>
    <!-- 三级分类 -->
    <Category :scene="scene"></Category>
    <el-card style="margin: 10px 10px" v-show="scene ==0">
      <el-button type="primary" size="default" icon="Plus" :disabled="categoryStore.c3Id ? false : true">添加SPU</el-button>
      <el-table border style="margin: 10px 10px" :data="records">
        <el-table-column label="序号" type="index" align="center" width="80px"></el-table-column>
        <el-table-column label="SPU名称" prop="spuName"></el-table-column>
        <el-table-column label="SPU描述" prop="description" show-overflow-tooltip></el-table-column>
        <el-table-column label="SPU操作">
          <!-- row:即为已有的SPU对象 -->
          <template #="{ row, $index }">
            <el-button type="primary" size="small" icon="Plus" title="添加SKU" @click="addSpu"></el-button>
            <el-button type="primary" :all="data11" size="small" icon="Edit" title="修改SPU" @click="updateSpu(row)"></el-button>
            <el-button type="primary" size="small" icon="View" title="查看SKU列表"></el-button>
            <el-popconfirm :title="`你确定删除${row.spuName}?`" width="200px">
              <template #reference>
                <el-button type="primary" size="small" icon="Delete" title="删除SPU"></el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination v-model:current-page="pageNo" v-model:page-size="pageSize" :page-sizes="[3, 5, 7, 9]" :background="true" layout=" prev, pager, next, jumper,->, sizes,total" :total="total" />
    </el-card>
    <spuForm v-show="scene ==2" ref="skuform" :all="data11"></spuForm>
    <skuForm v-show="scene ==1" @changeScene="changeScene"></skuForm>
  </div>
</template>


<script setup lang="ts">
import Category from '@/components/Category/index.vue'
import skuForm from '@/views/product/spu/skuForm.vue'
import spuForm from '@/views/product/spu/spuForm.vue'
import { ref, watch, onBeforeUnmount } from 'vue'
import CategoryStore from '@/store/modules/category/index'
import { HasSpuResponseData } from '@/api/spu/type'
import { useRouter } from 'vue-router'
import { reqHasSpu } from '@/api/product/spu/index'
let categoryStore = CategoryStore()
//场景的数据
let scene = ref<number>(0)
//分页器默认页码
let pageNo = ref<number>(1)

// 获得子组件的实例
let skuform = ref()

let data11 = ref()
//每一页展示几条数据
let pageSize = ref<number>(3)
let records = ref<Array<any>>([])
let total = ref<number>(0)
//此方法执行:可以获取某一个三级分类下全部的已有的SPU
const getHasSpu = async (pager = 1) => {
  //修改当前页码
  pageNo.value = pager
  let result: HasSpuResponseData = await reqHasSpu(pageNo.value, pageSize.value, categoryStore.c3Id)
  if (result.code == 200) {
    records.value = result.data.records
    total.value = result.data.total
  }
}

//监听三级分类ID变化
watch(
  () => categoryStore.c3Id,
  () => {
    //当三级分类发生变化的时候清空对应的数据
    records.value = []
    //务必保证有三级分类ID
    if (!categoryStore.c3Id) return
    getHasSpu()
  }
)

const changeScene = () => {
  scene.value = 0
}
//分页器下拉菜单发生变化的时候触发
const changeSize = () => {
  getHasSpu()
}
//添加新的SPU按钮的回调
const addSpu = () => {
  //切换为场景1:添加与修改已有SPU结构->SpuForm
  scene.value = 1
}

//修改已有的SPU的按钮的回调
const updateSpu = row => {
  //切换为场景1:添加与修改已有SPU结构->SpuForm
  scene.value = 2
  data11.value = row
  console.log(row)
  skuform.value.initHashspuData(row)
}
</script>



 
<style lang="scss" scoped></style>